<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <link href="${ctxStatic}/jquery-ztree/3.5.12/css/zTreeStyle/metro.css" rel="stylesheet" type="text/css"/>
    <%@include file="../../include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="../../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../../include/sidebar.jsp" %>
    <!--内容-->
    <div id="tree_main">
        <section class="section-box">
            <div class="section-main">
                <div class="c-time-list-header">
                    <div class="r">
                        <a href="javascript:void(0)" class="layui-btn layui-btn-radius layui-btn-danger" @click="edit()"> <i
                                class="iconfont icon-add btn-icon"
                        ></i>新增菜单
                        </a>
                    </div>
                    <div class="ovh">
                        <span class="title f20">菜单管理</span>
                        </span>
                    </div>
                </div>
                <div class="j-tree-wrap">
                    <ul class="j-tree-l ztree" id="tree_node">
                    </ul>
                    <div class="j-tree-r vh" id="table_wrap">
                        <table class="layui-table">
                            <colgroup>
                                <col width="150px">
                                <col>
                                <col>
                                <col width="150px">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>菜单名</th>
                                <th>链接</th>
                                <th>权限代码</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, i) in tableData" :key="item.id" class="sortable" :data-id="item.id"
                                :data-name="item.name">
                                <td>{{item.name}}</td>
                                <td>{{item.href}}</td>
                                <td>{{item.permission}}</td>
                                <td class="tb-opts">
                                    <div class="comm-opts">
                                        <a class="sort-handle" href="javascript:void(0);">
                                            <i class="iconfont icon-sort"></i>
                                        </a>
                                        <a class="green" href="javascript:void(0);" @click="edit(item)">
                                            编辑
                                        </a>
                                        <a class="red" href="javascript:void(0);" @click="del(item)">
                                            删除
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            <tr v-if="tableData.length == 0">
                                <td colspan="4" align="center">该菜单还没有子菜单</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div><!--底部-->
            <%@include file="../../include/footer.jsp" %>
        </section>
        <form id="myForm" style="display: none;margin-right: 50px" class="layui-form mt20" method="post"
          action="${ctx}/system/menu/save.do">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名<span class="f-verify-red">*</span></label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="name" autocomplete="off" v-model="editMenu.name"
                       placeholder="菜单名" class="layui-input" :value="editMenu.name"
                >
                <input type="hidden" name="id" :value="editMenu.id"/>
                <input type="hidden" name="parentId" :value="editMenu.pId"/>
                <input type="hidden" name="privilegeId" :value="editMenu.privilegeId"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">父菜单</label>
            <div class="layui-input-block">
                <input type="text" name="parentName" lay-verify="parentName" autocomplete="off" v-model="editMenu.parentName"
                       placeholder="父菜单" class="layui-input" :value="editMenu.parentName"
                       @focus="selParent()"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input type="text" name="href" lay-verify="href" autocomplete="off" v-model="editMenu.href"
                       placeholder="链接" class="layui-input" :value="editMenu.href"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">匹配规则</label>
            <div class="layui-input-block">
                <input type="text" name="rule" lay-verify="rule" autocomplete="off" v-model="editMenu.rule"
                       placeholder="匹配规则" class="layui-input" :value="editMenu.rule"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限代码</label>
            <div class="layui-input-block">
                <input type="text" name="permission" lay-verify="permission" autocomplete="off" v-model="editMenu.permission"
                       placeholder="权限代码" class="layui-input" :value="editMenu.permission"
                >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择图标</label>
            <div class="layui-input-block">
                <input type="hidden" name="icon" :value="editMenu.iconfont" v-model="editMenu.iconfont"/>
                <i class="iconfont" :class="[editMenu.iconfont]"></i>
                <a class="layui-btn layui-btn-sm" @click="selIcon">选择</a>
                <a class="layui-btn layui-btn-sm layui-btn-normal" @click="removeIcon">移除</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <a href="javascript:void(0)" class="layui-btn layui-btn-danger" lay-submit
                   lay-filter="myForm">立即提交</a>
            </div>
        </div>
    </form>
    </div>
</div>
<div id="selTree" class="ztree" style="display: none"></div>

<script type="text/x-dot-template" id="tree_r_template">
</script>
<script src="${ctx}/script/common/list.js"></script>
<script src="${ctx}/script/common/table_option.js"></script>
<script src="${ctxStatic}/jquery-ztree/3.5.12/js/jquery.ztree.all-3.5.min.js"></script>
<script src="${ctxStatic}/jquery-ui/jquery-ui-1.12.1/jquery-ui.min.js"></script>
<script src="${ctxStatic}/vue/vue.min.js"></script>
<script type="text/javascript">
    var zTreeObj, selTreeObj, form, layer, menuMain, formIndex, selIndex;
    $(function () {
        layui.use(['form', 'layer'], function () {
            form = layui.form, layer = layui.layer;
            form.verify({
                name: function (value) {
                    if (value == "") {
                        return '请填写菜单名';
                    }
                }
            });

            form.on('submit(myForm)', function (data) {
                $(data.elem).removeAttr("lay-submit");
                var action = $("#myForm").attr("action");
                var formData = util.serializeForm($('#myForm').serializeArray());
                txz.ajaxRequest({
                    method: 'post',
                    url: action,
                    params: formData,
                    callBack: function (res) {
                        if (res.success) {
                            $(data.elem).attr("lay-submit", "");
                            layer.close(formIndex);
                            //更新树节点
                            var newMenu = res.data;
                            newMenu.iconfont = newMenu.icon;
                            newMenu.icon = '';
                            if (!formData.id) {//新增
                                newMenu.pId = newMenu.parentId;
                                newMenu.permission = formData.permission;
                                menuMain.node.push(newMenu);
                                menuMain.tableData.push(newMenu);
                                zTreeObj.addNodes(menuMain.activeMenu, newMenu);
                            } else {//编辑
                                var node = zTreeObj.getNodeByParam("id", newMenu.id, null);
                                node = $.extend(node, newMenu);
                                menuMain.$set(menuMain, 'editMenu', node);
                                zTreeObj.updateNode(node);
                                if(menuMain.activeMenu.id == newMenu.parentId){
                                    for (var i = 0; i < menuMain.tableData.length; i++) {
                                        if (newMenu.id === menuMain.tableData[i].id) {
                                            newMenu.pId = newMenu.parentId;
                                            newMenu.permission = formData.permission;
                                            menuMain.tableData.splice(i, 1, newMenu);
                                        }
                                    }
                                }else{ //修改了父节点
                                    for (var i = 0; i < menuMain.tableData.length; i++) {
                                        if (newMenu.id === menuMain.tableData[i].id) {
                                            menuMain.tableData.splice(i, 1);
                                        }
                                    }
                                    var targetNode = zTreeObj.getNodeByParam("id", newMenu.id, null);
                                    var parentNode = zTreeObj.getNodeByParam("id", formData.parentId, null);
                                    zTreeObj.moveNode(parentNode, targetNode, "inner");
                                }
                            }
                        } else {
                            $(data.elem).attr("lay-submit", "");
                            util.layerMsgError("提交失败")
                        }
                    }
                });
            });
        });
    })
    menuMain = new Vue({
        el: '#tree_main',
        data: {
            node: ${tree},
            activeMenu: {},
            activeSiblingMenu: [],
            tableData: [],
            editMenu: {}
        },
        watch: {
            node: function () {

            }
        },
        mounted: function () {
            var that = this;
            /*初始化左边树*/
            var setting = {
                view: {
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        that.activeMenu = treeNode;
                        that.tableData = zTreeObj.getNodesByFilter(function (node) {
                            return node.pId == treeNode.id;
                        });
                        that.activeSiblingMenu = zTreeObj.getNodesByFilter(function (node) {
                            return node.pId == treeNode.pId;
                        });
                    }
                }
            };
            zTreeObj = $.fn.zTree.init($("#tree_node"), setting, this.node);

            this.tableData = zTreeObj.getNodesByFilter(function (node) {
                return (node.pId == 1);
            });
            $("#table_wrap tbody").sortable({
                helper: function (e, $el) {
                    return $('<div id="sort_helper">' + $el.data('name') + '</div>');
                },
                handle: ".sort-handle",
                stop: function (event, ui) {
                    var $target = $(ui.item), $prev = $target.prev(), $next = $target.next();
                    var targetNode = zTreeObj.getNodeByParam("id", $target.data('id'), null);
                    if ($prev.length === 1) {
                        var nextNode = zTreeObj.getNodeByParam("id", $prev.data('id'), null);
                        zTreeObj.moveNode(nextNode, targetNode, "next");
                    } else if ($next.length == 1) {
                        var prevNode = zTreeObj.getNodeByParam("id", $next.data('id'), null);
                        zTreeObj.moveNode(prevNode, targetNode, "prev");
                    }
                    var sortIdArray = $('#table_wrap tbody').sortable('toArray', {attribute: 'data-id'}); // 排序后的id序列
                    that.sort(sortIdArray);
                }
            });
            $("#table_wrap tbody").disableSelection();
            $('#table_wrap').removeClass('vh');
        },
        methods: {
            removeIcon: function () {
                this.editMenu.iconfont = '';
            },
            selIcon: function () {
                var that = this;
                layer.open({
                    type : 2,
                    area : [ "520px", "500px" ],
                    title : "选择图标",
                    maxmin : true,
                    content : "${ctx}/page/system/menu/icon.jsp?icon="+that.editMenu.iconfont,
                    btn : [ '确定', '关闭' ],
                    yes : function(index, layero) {
                        var iframeWin = layero.find('iframe')[0];
                        var icon = iframeWin.contentWindow.selIcon();
                        that.$set(that.editMenu,'iconfont',icon);
                        top.layer.close(index);
                    },
                    cancel : function(index) {
                    }
                });
            },
            selParent: function () {
                var that = this;
                var pId = this.editMenu.pId;
                /*初始化选择树*/
                var selTreeObjSetting = {
                    check: {
                        enable: true,
                        nocheckInherit: true,
                        chkStyle: "radio",
                        radioType: "all",
                        chkboxType: {
                            "Y": "ps",
                            "N": "s"
                        }
                    },
                    view: {
                        selectedMulti: false
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };
                // 初始化树结构
                txz.ajaxRequest({
                    url: '${ctx}/system/menu/data.do',
                    callBack: function (ret) {
                        if (ret.success) {
                            selTreeObj = $.fn.zTree.init($("#selTree"), selTreeObjSetting, ret.data);
                            selTreeObj.checkNode(selTreeObj.getNodeByParam("id", pId, null), true, false);
                            //捕获页
                            selIndex = layer.open({
                                type: 1,
                                shade: false,
                                title: '选择父菜单',
                                btn: ['确定'],
                                area: ['300px', '500px'], //宽高
                                content: $('#selTree'),
                                yes: function (index, layero) {
                                    var checkedNode = selTreeObj.getCheckedNodes()[0];
                                    that.editMenu.parentName = checkedNode.name;
                                    that.editMenu.pId = checkedNode.id;
                                    that.editMenu.parentId = checkedNode.id;
                                    selTreeObj.destroy();
                                    layer.close(index);
                                }
                            });
                        }
                    }
                })
            },
            del: function (item) {
                var that = this;
                layer.confirm("确定删除该菜单吗", {
                    icon: 3,
                    title: '系统提示'
                }, function (index) {
                    layer.close(index);
                    $.post("${ctx}/system/menu/del.do", {
                        id: item.id
                    }, function (data) {
                        if (data.success == true) {
                            var index;
                            for (var i = 0; i < that.tableData.length; i++) {
                                if (item === that.tableData[i]) {
                                    index = i;
                                }
                            }
                            that.tableData.splice(index, 1);
                            //删除树节点
                            var node = zTreeObj.getNodeByParam("id", item.id, null);
                            zTreeObj.removeNode(node);
                        }
                    })
                });

            },
            sort: function (sortList) {
                txz.ajaxRequest({
                    url: '${ctx}/system/menu/sort.do',
                    params: {
                        sortList: sortList.join(',')
                    },
                    callBack: function (ret) {
                        if (ret.success) {

                        }
                    }
                })
            },
            edit: function (item) {
                var that = this;
                this.editMenu = item||{};
                this.editMenu.parentName = this.activeMenu.name;
                this.editMenu.pId = this.editMenu.pId || this.activeMenu.id || 1;
                this.editMenu.parentId = this.editMenu.pId;
                if (!item || !item.id) {
                    this.editMenu.permission = this.activeMenu.permission;
                }
                //捕获页
                formIndex = layer.open({
                    type: 1,
                    shade: 0.5,
                    title: '编辑菜单',
                    area: ['500px', '500px'], //宽高
                    content: $('#myForm'),
                });
            }
        }
    });

</script>
</body>
</html>